<template>
	<view>
		<u-navbar title="个人信息" @custom-back="to_my"></u-navbar>
		<template>
			<u-cell-group>
				<u-cell-item title="手机号" :value="userInfo.mobile" :arrow="false"></u-cell-item>
				<u-cell-item title="头像" :arrow="false" @click="chooseAvatar">
					<template slot="right-icon">
						<image :src="userInfo.avatar_url" class="avatar_class"></image>
					</template>
				</u-cell-item>
				<u-cell-item title="昵称" :arrow="false">
					<template slot="right-icon">
						<u-input v-model="userInfo.nick_name" input-align="right"></u-input>
					</template>
				</u-cell-item>
			</u-cell-group>
		</template>
		<view>
			<button type="primary" style="background-color: #65a4f8;" @click="save_info">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: mapState(['uerInfo']),
		data() {
			return {
				userInfo: {
					avatar_url: '',
					nick_name: '',
					mobile:''
				}
			}
		},
		onShow() {
			this.get_user_info();
		},
		mounted() {
			this.get_user_info();
		},
		methods: {
			to_my() {
				uni.switchTab({
					url:'my'
				})
			},
			get_user_info(){
				uni.request({
					url:`${this.$serverUrl}/userinfo`,
					header: {
						"Content-Type": "application/json"
					},
					data: {
						"uid": this.uerInfo.uid,
						"token": this.uerInfo.token
					},
					method: "GET",
					success: (e) => {
						if(e.data.status == 200){
							this.userInfo.avatar_url = e.data.data.avatar;
							this.userInfo.nick_name = e.data.data.nickname;
							this.userInfo.mobile = e.data.data.phone;
						}else{
							this.$toast_fail(e.data);
						}
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					},
					complete: () => {
					}
				})
			},
			chooseAvatar() {
				var that = this;
				uni.chooseImage({
					count:1,
					sizeType:"original",
					success(res){
						let imgFiles = res.tempFilePaths;
						that.uploadAvatar(imgFiles);
					}
				});
			},
			uploadAvatar(imgFiles) {
				uni.uploadFile({
					url: `${this.$serverUrl}/upload/image`,
					filePath: imgFiles[0],
					name: 'file',
					formData: {
						"uid": this.uerInfo.uid,
						"token": this.uerInfo.token
					},
					success: (e) => {
						var result = JSON.parse(e.data);
						if(result.status == 200){
							this.userInfo.avatar_url = result.data.url;
						}else{
							this.$toast_fail(e.data);
						}
					}
				});
			},
			save_info() {
				uni.request({
					url:`${this.$serverUrl}/user/edit`,
					header: {
						"Content-Type": "application/json"
					},
					data: {
						"uid": this.uerInfo.uid,
						"token": this.uerInfo.token,
						"avatar": this.userInfo.avatar_url,
						"nickname": this.userInfo.nick_name
					},
					method: "POST",
					success: (e) => {
						if(e.data.status == 200){
							this.$toast_success(e.data.msg);
						}else{
							this.$toast_fail(e.data);
						}
					},
					fail: (e) => {
						this.$toast_fail({msg:"请求失败"});
					},
					complete: () => {
					}
				})
			}
		}
	}
</script>

<style>
	.avatar_class {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
	}
</style>
